<template>
  <d2-container :filename="filename">
    <template slot="header"></template>
    <d2-crud
      ref="d2Crud"
      :columns="columns"
      :data="listData"
      :add-template="addTemplate"
      :form-options="formOptions"
      :loading="loading"
      :pagination="pageData"
      :rowHandle="rowHandle"
      @pagination-current-change="paginationCurrentChange"
      @edit-item="onEdit"
      @del-item="onDel">
      <h5 slot="header">{{ breadCrumb }}</h5>
    </d2-crud>
  </d2-container>
</template>

<script>
import settings from '@/setting'
import request from '@/plugin/axios'
import ImageColumn from '@/components/custom-column/image'
import utils from '@/libs/util.gaed'

export default {
  name: 'CourseList',
  props: {
    // 面包屑
    breadCrumb: {
      type: String,
      require: true
    },
    // 页面加载列表数据的URL
    dataUrl: {
      type: String,
      require: true
    },
    // 编辑器对应的页面URL的name
    editorPathName: {
      type: String,
      require: true
    },
    // 展示跟多的列
    moreColumns: {
      type: Array,
      require: true
    }
  },
  data () {
    return {
      filename: __filename,
      columns: [
        {
          title: 'ID',
          key: 'id'
        },
        {
          title: '标题',
          key: 'title',
          width: 200
        },
        {
          title: '章节描述信息',
          key: 'description' // 章节描述信息
        },
        {
          title: '一句话推荐语',
          key: 'recommend',
          width: 120
        },
        {
          title: '封面图',
          key: 'cover_img', // 封面图URL
          width: 100,
          height: 100,
          component: {
            name: ImageColumn,
            props: {
              width: 100,
              height: 100,
              dataKey: 'cover_img'
            }
          }
        },
        {
          title: '章节主图',
          key: 'main_img', // 章节主图
          width: 100,
          height: 100,
          component: {
            name: ImageColumn,
            props: {
              width: 100,
              height: 100,
              dataKey: 'main_img'
            }
          }
        },
        {
          title: '缩略图',
          key: 'thumb',
          width: 100,
          height: 100,
          component: {
            name: ImageColumn,
            props: {
              width: 100,
              height: 100,
              dataKey: 'thumb'
            }
          }
        },
        {
          title: '作者',
          key: 'author_name',
          width: 80
        },
        {
          title: '创建时间',
          key: 'createTimeStr',
          width: 120
        }
        /*,
        {
          title: '文章内容',
          key: 'content'
        }
        */
      ],
      rowHandle: {
        custom: [
          {
            text: '编辑',
            size: 'small',
            emit: 'edit-item'
          },
          {
            text: '删除',
            type: 'warning',
            size: 'small',
            emit: 'del-item'
          }
        ]
      },
      listData: [],
      pageData: {
        total: 0
      },
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 100,
        total: 0
      },
      addTemplate: {
        title: {
          title: '标题',
          value: ''
        },
        author_name: {
          title: '作者',
          value: ''
        },
        desc: {
          title: '简介',
          value: ''
        }
      },
      formOptions: {
        labelWidth: '80px',
        labelPosition: 'left',
        saveLoading: false
      }
    }
  },
  mounted () {
    this.initList()
  },
  methods: {
    initList () {
      request.get.call(this, this.dataUrl).then(response => {
        if (this.moreColumns) {
          this.columns = this.columns.concat(this.moreColumns)
        }
        this.listData = response.lists.map(d => {
          d.createTimeStr = d.create_time ? utils.formatDate(new Date(1000 * (+d.create_time)), settings.datetime_format) : ''
          return d
        })
        this.pageData.total = response.total
      }).catch((err) => {
        console.warn(err)
      })
    },
    paginationCurrentChange (e) {
      console.log('当前页面翻页事件：', e)
    },
    onEdit ({ index, row }) {
      this.$router.push({
        name: this.editorPathName,
        params: {
          id: row.id
        }
      })
    },
    onDel ({ index, row }) {
      this.$alert('确认删除当前项？', row.title, {
        confirmButtonText: '确定',
        callback: (action) => {
          let url = this.dataUrl + '/' + row.id
          request.delete(url).then(response => {
            this.initList()
          }).catch(function (error) {
            console.log(error)
          })
        }
      })
    }
  }
}
</script>
